<template>
  <div class="cc-box">
    <div class="gui-padding bgf">
      <div class="mb15">
        <a-breadcrumb>
          <a-breadcrumb-item>
            船舶管理
          </a-breadcrumb-item>
          <a-breadcrumb-item>
            船员调配
          </a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <div class="mb10">
          <div class="flex justify-content-between align-center">
            <a-tabs v-model:activeKey="currentIndex" type="card" @change="handleChangeItem"
            style="max-width:70%">
              <a-tab-pane v-for="(item,index) in tableData" :key="index" :tab="item.zhongWenMing +'('+ item.leiXing+'/'+ item.zongDun+')'"></a-tab-pane>
            </a-tabs>
            <div class="flex align-center" style="justify-content: flex-end;width: 480px;">
              <div class="mr10 flex">
                <a-checkbox v-model:checked="lirencheck">
                  离任
                </a-checkbox>
                <a-checkbox v-model:checked="jieticheck">
                  接替
                </a-checkbox>
              </div>
              <a-date-picker v-model:value="shangChuanRiQi"
                             show-time
                             :disabled-date="handleDidsableDate"
                             value-format="YYYY-MM-DD"
                             format="YYYY-MM-DD"
                             @change="handleChangeDate"
                             class="mr10"></a-date-picker>
              <a-button @click="handleReset">
                重置
              </a-button>
            </div>
          </div>
          <a-layout-content :style="contentStyle">
              <div class=" ml20">
                <div id="forDeploy" class="mt20">
                  <template v-if="tableDataDetail && tableDataDetail.length > 0">
                    <template v-for="tableItem in tableDataDetail">
                      <table class="table-bordered">
                        <thead class="thead-th-weight">
                        <tr>
                          <th class="padding-5 td-first"
                              style="color: rgb(102, 102, 102); background: rgb(238, 238, 238); height: 55px; width: 95px; min-width: 95px; max-width: 95px;">
                        <span style="float:right;margin-top:-5px;margin-right: 1px;" class="ng-binding">
                          职位
                        </span>
                            <span style="float:left;margin-top:11px; margin-right: 7px;" class="ng-binding">
                          状态
                        </span>
                          </th>

                          <th class="padding-5"
                              style="background: rgb(238, 238, 238); color: rgb(102, 102, 102); text-align: center; height: 55px; width: 95px; min-width: 95px; max-width: 95px;"
                              v-for="(item,index) in tableItem" :key="index">
                            <label style="cursor: pointer" tooltip="" class="ng-binding">
                              {{ item.zhiWei }}
                            </label>
                          </th>
                        </tr>
                        </thead>
                        <tbody>
                        <!--离任-->
                        <tr class="ng-scope" v-if="lirencheck">
                          <td class="padding-5 cell-css" n
                              style="background: rgb(244, 244, 244); height: 41px; width: 95px; min-width: 95px; max-width: 95px;">
                          <span class="ng-binding">
                            离任
                          </span>
                          </td>
                          <td class="padding-5 cell-css" v-for="(item,index) in tableItem">
                            <span class="crew-name pointer" @click="handleAddOpen3(item.liRenChuanYuanId)">
                              {{ item.liRenChuanYuanMing }}
                            </span>
                          </td>
                        </tr>
                        <!--在船-->
                        <tr>
                          <td class="padding-5 cell-css" n
                              style="background: rgb(82, 217, 220); height: 70px; width: 95px; min-width: 95px; max-width: 95px;">
                          <span class="ng-binding">
                            在船
                          </span>
                          </td>
                          <td class="padding-5 cell-css"
                              style="position: relative; height: 70px; width: 95px; min-width: 95px; max-width: 95px;"
                              v-for="(item,index) in tableItem">
                            <div class="crew-name pointer mb5" @click="handleAddOpen3(item.zaiChuanChuanYuanId)">
                              <!--上船信息-->
                              <a-tooltip placement="top" v-if="(item.diaoLingDO && item.diaoLingDO.id) && (item.liChuanShenQingDO && item.liChuanShenQingDO.id)">
                                <template #title>
                                  <div class="flex flex-c">
                                    <span>【该船员已存在离船申请】</span>
                                    <span>计划下船时间：{{item.liChuanShenQingDO.xiaChuanKaiShiRiQi}} ~ {{item.liChuanShenQingDO.xiaChuanJieShuRiQi}}</span>
                                  </div>
                                  <div class="flex flex-c">
                                    <span>【该船员存在调令】</span>
                                    <span>预计下船信息：{{item.diaoLingDO.shangXiaChuanRiQi}}; {{item.diaoLingDO.shangXiaChuanDiDian}}</span>
                                  </div>
                                </template>
                                <span class="red"> {{ item.zaiChuanChuanYuanMing }} <i class="iconfont icon-eye mr3"></i></span>
                              </a-tooltip>
                              <!--离船信息-->
                              <a-tooltip placement="top" v-else-if="!item.liChuanShenQingDO && (item.diaoLingDO && item.diaoLingDO.id)">
                                <template #title>
                                  <div class="flex flex-c">
                                    <span>【该船员存在调令】</span>
                                    <span>预计下船信息：{{item.diaoLingDO.shangXiaChuanRiQi}}; {{item.diaoLingDO.shangXiaChuanDiDian}}</span>
                                  </div>
                                </template>
                                <span class="red"> {{ item.zaiChuanChuanYuanMing }} <i class="iconfont icon-eye mr3"></i></span>
                              </a-tooltip>
                              <!--离船信息-->
                              <a-tooltip placement="top" v-else-if="(item.liChuanShenQingDO && item.liChuanShenQingDO.id) && !item.diaoLingDO">
                                <template #title>
                                  <div class="flex flex-c">
                                    <span>【该船员已存在离船申请】</span>
                                    <span>计划下船时间：{{item.liChuanShenQingDO.xiaChuanKaiShiRiQi}} ~ {{item.liChuanShenQingDO.xiaChuanJieShuRiQi}}</span>
                                  </div>
                                </template>
                                <span class="red"> {{ item.zaiChuanChuanYuanMing }} <i class="iconfont icon-eye mr3"></i></span>
                              </a-tooltip>
                              <span  v-else> {{ item.zaiChuanChuanYuanMing }}</span>
                            </div>
                            <div class="ng-scope" v-if="item.zaiChuanChuanYuanId>0">
                              <div
                                  style="font-size: 12px;width: 100%;background: #EAEAEA;border-radius: 2px;cursor: pointer;color: #666666; margin-left: auto; margin-right: auto;"
                                  class="ng-binding">
                                <div @click="handleAddOpen1(item)">下船</div>
                              </div>
                            </div>
                            <div class="ng-scope" v-else>
                              <div
                                  style="font-size: 12px;width: 100%;background: #EAEAEA;border-radius: 2px;cursor: pointer;color: #666666; margin-left: auto; margin-right: auto;"
                                  class="ng-binding">
                                <div @click="handleAddOpen2(item)">上船</div>
                              </div>
                            </div>
                          </td>
                        </tr>
                        <!--接替-->
                        <tr class="ng-scope" v-if="jieticheck">
                          <td class="padding-5 cell-css" n
                              style="background: rgb(253, 210, 70); height: 55px; width: 95px; min-width: 95px; max-width: 95px;">
                        <span class="ng-binding">
                          接替
                        </span>
                          </td>
                          <td class="padding-5 cell-css" v-for="(item,index) in tableItem" :key="index">
                            <span class="crew-name pointer" v-if="item.jieTiChuanYuanId>0"
                               @click="handleAddOpen3(item.jieTiChuanYuanId)">
                              {{ item.jieTiChuanYuanMing }}
                            </span>
                            <div style="position: relative;margin-top:2px;" class="ng-scope"
                                 v-if="item.jieTiChuanYuanId>0">
                              <div
                                  style="font-size: 12px;width: 100%;background: #EAEAEA;border-radius: 2px;cursor: pointer;color: #666666; margin-left: auto; margin-right: auto;"
                                  class="ng-binding">
                                <a-dropdown>
                                  <template #overlay>
                                    <a-menu>
                                      <a-menu-item  @click="handleMenuClick(1,item)" key="1">编辑</a-menu-item>
                                      <a-menu-item  key="2">
                                        <a-popconfirm title="你确定删除吗?" @confirm="handleDelete(item)"><span>删除</span></a-popconfirm>
                                      </a-menu-item>
                                    </a-menu>
                                  </template>
                                  <a-button type="text" size="small" class="fz12">
                                    操作
                                    <DownOutlined/>
                                  </a-button>
                                </a-dropdown>
                              </div>
                            </div>
                            <div class="ng-scope" v-else>
                              <div class="ng-scope">
                                <div
                                    style="font-size: 12px;width: 100%;background: #EAEAEA;border-radius: 2px;cursor: pointer;color: #666666; margin-left: auto; margin-right: auto;"
                                    class="ng-binding">
                                  <div @click="handleAddOpen(item)">新增</div>
                                </div>
                              </div>
                            </div>
                          </td>
                        </tr>
                        </tbody>
                      </table>
                    </template>
                  </template>
                </div>
                <div class="normore" v-if="tableDataDetail && tableDataDetail.length == 0">暂无数据</div>
              </div>
            </a-layout-content>
      </div>
    </div>
    <add-shang-chuang ref="addRef2" @success="handleLoadDataDetail"></add-shang-chuang>
    <add-xia-chuan ref="addRef1" @success="handleLoadDataDetail"></add-xia-chuan>
    <add-jieti ref="addRef" @success="handleLoadDataDetail"></add-jieti>
    <add-edit-jieti ref="addRef4" @success="handleLoadDataDetail"></add-edit-jieti>
<!--    <show-info ref="addRef3"></show-info>-->
    <edit-info ref="addRef3" @success="handleLoadData"></edit-info>
  </div>
</template>
<script setup>
import dayjs from 'dayjs';
import AddShangChuang from "./compoments/AddShangChuang.vue";
import AddXiaChuan from "./compoments/AddXiaChuan.vue";
import AddJieti from "./compoments/AddJieti.vue";
import AddEditJieti from "./compoments/AddEditJieti.vue";
import ShowInfo from "./compoments/ShowInfo.vue";
import EditInfo from "./compoments/EditInfo.vue";

const lirencheck = ref(true)
const jieticheck = ref(true)
const addRef = ref(null)
const addRef1 = ref(null)
const addRef2 = ref(null)
const addRef3 = ref(null)
const addRef4 = ref(null)
const tableDataDetail = ref([])
const currentDate = new Date();
const formattedTime = currentDate.toISOString().split('T')[0]
const shangChuanRiQi = ref(formattedTime)
const handleDidsableDate = (current) => {
  return current && current > dayjs().endOf('day');
}

const total = ref(0)
const currentIndex = ref(0)
const tableData = ref([])
const currentItem = ref({})
const queryParams = reactive({
  pageNo: 1,
  pageSize: 500,
  keyword: '',
  flag: 2,
})
const tableDataOld = ref([])


const contentStyle = {
  background: '#fff'
};

const siderStyle = {
  color: '#fff',
};


// 根据船舶数据查询列表明细
const handleLoadDataDetail = async () => {
  const params = {
    xinXiId: currentItem.value.id,
    shangChuanRiQi: shangChuanRiQi.value
  }
  const resp = await useLoadChuanYuanDiaoPeiApi(params)
  tableDataOld.value = resp.data
  handleChangeDataTable()
}

const handleChangeDataTable = async () => {
  var fenshuDom = document.getElementById("forDeploy");
  var fenwidth = fenshuDom.offsetWidth || fenshuDom.clientWidth
  var tdwidth = 95
  var fenshu = Math.floor(fenwidth / tdwidth)
  tableDataDetail.value = handleSliceArr(tableDataOld.value, fenshu - 1)
}

// 查询船舶数据
const handleLoadData = async () => {
  const resp = await useLoadChuanBoXinXiApi(queryParams)
  tableData.value = resp.data.records
  total.value = resp.data.total
  if (tableData.value && tableData.value.length > 0) {
    currentItem.value = resp.data.records[0]
    handleLoadDataDetail()
  }
}

// 改变选项
const handleChangeItem = (index) => {
  currentIndex.value = index
  currentItem.value = tableData.value[index]
  tableDataDetail.value = []
  handleLoadDataDetail()
}

const handleReset = () => {
  const currentDate = new Date();
  const formattedTime = currentDate.toISOString().split('T')[0]
  shangChuanRiQi.value = formattedTime
  tableDataDetail.value = []
  handleLoadDataDetail()
}

const handleChangeDate = (e) => {
  shangChuanRiQi.value = e
  handleLoadDataDetail()
}

// 搜索
const handleSearch = () => {
  queryParams.pageNo = 1
  handleLoadData()
}

// 打开添加
const handleAddOpen = (record) => {
  addRef.value.handleOpen(record)
}
const handleAddOpen1 = (record) => {
  addRef1.value.handleOpen({...record})
}
const handleAddOpen2 = (record) => {
  addRef2.value.handleOpen({...record})
}
const handleAddOpen3 = (id) => {
  addRef3.value.handleOpen(id)
}
const handleAddOpen4 = (record) => {
  addRef4.value.handleOpen({...record})
}

const handleMenuClick = (e,item) => {
  if (e == 1) {
    handleAddOpen4(item)
  }
}

const handleDelete = async(item) => {
  await useDelChuanYuanDiaoPeiJTApi(item.id)
  useMessage().success("删除成功!");
  handleLoadDataDetail()
}


const handleSliceArr = (array, chunkSize) => {
  let result = [];
  for (let i = 0; i < array.length; i += chunkSize) {
    result.push(array.slice(i, i + chunkSize));
  }
  return result;
}

onMounted(() => {
  handleLoadData()
  window.addEventListener("resize", function () {
    handleChangeDataTable()
  })
})
</script>

<style lang="scss">
.cc-box {
  .ant-layout-sider {
    min-width: 320px !important;
  }

  .kk-item-list {
    height: calc(100vh - 215px);
    overflow: auto;

    .active {
      background: #e9f5ff;
    }
  }

  .gutter-box {
    margin-bottom: 6px;
  }
}


.table {
  margin-bottom: 10px
}

.table-hover > tbody > tr:hover, .table-striped > tbody > tr:nth-of-type(odd), .table > tbody > tr.active > td, .table > tbody > tr.active > th, .table > tbody > tr > td.active, .table > tbody > tr > th.active, .table > tfoot > tr.active > td, .table > tfoot > tr.active > th, .table > tfoot > tr > td.active, .table > tfoot > tr > th.active, .table > thead > tr.active > td, .table > thead > tr.active > th, .table > thead > tr > td.active, .table > thead > tr > th.active {
  background-color: #f7fafc !important
}

.table-bordered, .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
  border-top: 1px solid #e4e7ea
}

.table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
  border: 1px solid #E4E7EA
}

#forDeploy > .table-bordered > tbody > tr > td, #forDeploy > .table-bordered > tbody > tr > th, #forDeploy > .table-bordered > tfoot > tr > td, #forDeploy > .table-bordered > tfoot > tr > th, #forDeploy > .table-bordered > thead > tr > td, #forDeploy > .table-bordered > thead > tr > th {
  border: 1px solid #DEDEDE
}

.table > thead > tr > th {
  border-bottom: 1px solid #E4E7EA
}

tbody {
  color: #797979
}

th {
  color: #666;
  font-weight: 500
}

.table-bordered {
  border: 1px solid #e4e7ea
}

table.focus-on tbody tr.focused td, table.focus-on tbody tr.focused th {
  background-color: #ff6849;
  color: #fff
}

.table-rep-plugin .table-responsive {
  border: none !important
}

.table-rep-plugin tbody th {
  font-size: 14px;
  font-weight: 400
}


th.td-first {
  height: 55px;
  position: relative
}

th.td-first:before {
  content: "";
  position: absolute;
  width: 1px;
  height: 108px;
  top: 0;
  left: 0;
  background-color: #DEDEDE;
  display: block;
  transform: rotate(-59.5deg);
  transform-origin: top
}

.cell-css {
  height: 70px;
  text-align: center;
}

.normore {
  text-align: center;
  font-size: 24px;
  color: #6666;
  padding: 100px;
  background: #fafafa;
}
</style>

